<template>
  <div class="near_history">
    <div
      class="map-title animate__animated animate__flipInY"
      style="display: block"
    >
      <h1>疫情期间北京附近人口流动轨迹情况</h1>
      <h3>2021年某一时刻其他城市流入北京市及北京市的人口流动轨迹情况</h3>
    </div>

    <div
      id="container"
      class="animate__animated animate__flipInY"
      style="display: block"
    ></div>

    <img id="change" src="./img/change.png" alt="" />

    <div
      id="main"
      class="animate__animated animate__flipInY"
      style="display: none"
    ></div>
  </div>
</template>



<script>
import axois from "@/utils/axios";
import * as echarts from "echarts";
export default {
  data() {
    return {};
  },
  mounted() {
    this.getData();
    this.change();
    this.getChart();
  },
  methods: {
    change() {
      $("#change").click(function () {
        if ($(".map-title").css("display") == "none") {
          $(".map-title").show();
        } else {
          $(".map-title").hide();
        }
        if ($("#container").css("display") == "none") {
          $("#container").show();
          // $("#main").hide();
        } else {
          $("#container").hide();
          // // $("#main").show();
          // this.$options.methods.getChart();
        }
        if ($("#main").css("display") == "none") {
          $("#main").show();
        } else {
          $("#main").hide();
        }
      });
    },
    getData() {
      var map = new AMap.Map("container", {
        mapStyle: "amap://styles/grey",
        center: [116.40866, 39.87596],
        zoom: 11,
        pitch: 50,
        skyColor: "#483D8B",
        rotation: 45,
        viewMode: "3D",
      });

      var layer = new Loca.LinkLayer({
        map: map,
        fitView: false,
      });

      // $.get('http://localhost:6677/trajectory/findAllTrajectory', function (res) {
      axois.get("/trajectory/findAllTrajectory").then((res) => {
        // console.log( "响应 ==>" + res);
        // console.log( "响应 ==>" + res.data);
        // console.log( "响应 ==>" + res.data.data);
        layer.setData(JSON.parse(res.data.data).slice(0, 500), {
          lnglat: "lnglat",
        });

        layer.setOptions({
          blendMode: "lighter",
          style: {
            // 曲率 [-1, 1] 区间
            curveness: function (data) {
              if (data.value.dis < 100) {
                return 0.07;
              } else if (data.value.dis < 300) {
                return 0.05;
              } else if (data.value.dis < 500) {
                return 0.02;
              } else if (data.value.dis < 700) {
                return 0.01;
              } else {
                return 0.005;
              }
            },
            opacity: 0.8,
            color: "#5DFBF9",
          },
        });

        layer.render();
      });
    },
    getChart() {
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom, "dark");
      var option;

      var builderJson = {
        all: 10887,
        charts: {
          白云观: 3178,
          天宁寺: 3164,
          国宾酒店: 7561,
          清华大学: 8728,
          北京大学: 7355,
          百度科技园: 2405,
          林奥嘉园: 1842,
          龙德广场: 3090,
          望京SOHO: 2262,
          苹果社区: 3193,
        },
        components: {
          白云观: 1437,
          天宁寺: 3764,
          长城饭店: 7651,
          清华大学: 8118,
          北京大学: 7355,
          百度科技园: 4321,
          世贸天阶: 2265,
          CBD国际大厦: 5003,
          天坛公园: 1762,
          苹果社区: 4005,
        },
        ie: 9743,
      };

      var downloadJson = {
        东城区: 14300,
        海淀区: 8700,
        丰台区: 3400,
        昌平区: 6700,
        其他: 2340,
      };

      var themeJson = {
        东城区: 13792,
        海淀区: 7691,
        丰台区: 5643,
        昌平区: 6298,
        其他: 2798,
      };

      var waterMarkText = "ECHARTS";

      var canvas = document.createElement("canvas");
      var ctx = canvas.getContext("2d");
      canvas.width = canvas.height = 100;
      ctx.textAlign = "center";
      ctx.textBaseline = "middle";
      ctx.globalAlpha = 0.08;
      ctx.font = "20px Microsoft Yahei";
      ctx.translate(50, 50);
      ctx.rotate(-Math.PI / 4);
      ctx.fillText(waterMarkText, 0, 0);

      option = {
        backgroundColor: {
          type: "pattern",
          image: canvas,
          repeat: "repeat",
        },
        tooltip: {},
        title: [
          {
            text: "2020和2021年疫情期间北京人口活动分布表",
            subtext: "总计 " + builderJson.all,
            left: "30%",
            textAlign: "center",
          },
          {
            text: "2020年各区人口流动分布",
            subtext:
              "总计 " +
              Object.keys(downloadJson).reduce(function (all, key) {
                return all + downloadJson[key];
              }, 0),
            left: "75%",
            textAlign: "center",
          },
          {
            text: "2021年各区人口流动分布",
            subtext:
              "总计 " +
              Object.keys(themeJson).reduce(function (all, key) {
                return all + themeJson[key];
              }, 0),
            left: "75%",
            top: "50%",
            textAlign: "center",
          },
        ],
        grid: [
          {
            top: 50,
            width: "50%",
            bottom: "45%",
            left: 10,
            containLabel: true,
          },
          {
            top: "55%",
            width: "52%",
            bottom: 0,
            left: 0,
            containLabel: true,
          },
        ],
        xAxis: [
          {
            type: "value",
            max: builderJson.all,
            splitLine: {
              show: false,
            },
          },
          {
            type: "value",
            max: builderJson.all,
            gridIndex: 1,
            splitLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "category",
            data: Object.keys(builderJson.charts),
            axisLabel: {
              interval: 0,
              rotate: 30,
            },
            splitLine: {
              show: false,
            },
          },
          {
            gridIndex: 1,
            type: "category",
            data: Object.keys(builderJson.components),
            axisLabel: {
              interval: 0,
              rotate: 30,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            type: "bar",
            stack: "chart",
            z: 3,
            label: {
              position: "right",
              show: true,
            },
            data: Object.keys(builderJson.charts).map(function (key) {
              return builderJson.charts[key];
            }),
          },
          {
            type: "bar",
            stack: "chart",
            silent: true,
            itemStyle: {
              color: "#eee",
            },
            data: Object.keys(builderJson.charts).map(function (key) {
              return builderJson.all - builderJson.charts[key];
            }),
          },
          {
            type: "bar",
            stack: "component",
            xAxisIndex: 1,
            yAxisIndex: 1,
            z: 3,
            label: {
              position: "right",
              show: true,
            },
            data: Object.keys(builderJson.components).map(function (key) {
              return builderJson.components[key];
            }),
          },
          {
            type: "bar",
            stack: "component",
            silent: true,
            xAxisIndex: 1,
            yAxisIndex: 1,
            itemStyle: {
              color: "#eee",
            },
            data: Object.keys(builderJson.components).map(function (key) {
              return builderJson.all - builderJson.components[key];
            }),
          },
          {
            type: "pie",
            radius: [0, "30%"],
            center: ["75%", "25%"],
            data: Object.keys(downloadJson).map(function (key) {
              return {
                name: key.replace(".js", ""),
                value: downloadJson[key],
              };
            }),
          },
          {
            type: "pie",
            radius: [0, "30%"],
            center: ["75%", "75%"],
            data: Object.keys(themeJson).map(function (key) {
              return {
                name: key.replace(".js", ""),
                value: themeJson[key],
              };
            }),
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>

<style scoped>
.near_history {
  width: 100%;
  height: 530px;
}
#container {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  /* background-color: #fff; */
  z-index: 1;
}
.map-title {
  position: absolute;
  top: 25px;
  left: 25px;
  z-index: 2;
}

.map-title > h1 {
  font-size: 18px;
  margin: 0;
  color: rgb(70, 214, 214);
}

.map-title > h3 {
  font-size: 12px;
  font-weight: normal;
  margin-top: 5px;
  color: rgb(70, 214, 214, 0.7);
}
img {
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
  z-index: 3;
}
#main {
  margin: 0;
  padding: 0;
  width: 1070px;
  height: 530px;
  z-index: 1;
}
</style>
